<template>
<div class="combina" ref="zinput">
  <span>{{title}}</span>
  <div class="combination" v-for="(i, index) in list" :key="index">
    <znumtooth 
        @getLeftData="(() => (getLeftData(index)))()"
        @getRightData="(() => (getRightData(index)))()"
        @getLeftBottomData="(() => (getLeftBottomData(index)))()"
        @getRightBottomData="(() => (getRightBottomData(index)))()"
        :lTToolist ="i.Tleft"
        :rTToolist ="i.Tright"
        :lBToolist ="i.Bleft"
        :rBToolist ="i.Bright"
        ></znumtooth>
    <zinput @changValue="(() => (changValue(index)))()" ref="zinputdom" 
      :title="title" 
      :textareaValue="i.val"
      :tree-data="treeData"
      ></zinput>
    <span class="del-combin" v-if="i.isDel">
      <el-icon @click="handleDelete(list ,index)"><delete  /></el-icon>
    </span>
  </div>
  <div class="combination-footer">
    <span class="btn" @click="addToothPosition">
      <el-icon><circle-plus /></el-icon>
      <span>添加牙位</span>
    </span>
    
  </div>
</div>
</template>

<script lang='ts'>
import { Delete, CirclePlus } from '@element-plus/icons-vue'
import { defineComponent, PropType, reactive, ref, onMounted, watch } from "@vue/runtime-core";
import Zinput from '../../views/patients/details/components/zinput.vue'
import znumtooth from "../../components/tooch/numTooth.vue"

import { TreeData } from "../../types/index"

export type ToothList = {
  isDel: boolean,
  val: string,
  Tleft: ToothData[],
  Tright: ToothData[],
  Bleft: ToothData[],
  Bright: ToothData[],
}

export type ToothData = {
      id: string,
      sub: string,
      super: string,
      isClick: string,
      isActive: boolean,
    }


export default defineComponent({
  name: 'ZCompose',
  props: {
    toothList: {
      type: Array as PropType<ToothList[]>,
      // default: [
      //   {
      //     isDel: false
      //   }
      // ]
    },
    title: {
      type: String
    },
    treeData: {
      type: Array as PropType<TreeData[]>,
      default: []
    }
    // textareaValue: {
    //   type: String
    // }
  },
  components: {
    Zinput,
    znumtooth,

    Delete,
    CirclePlus
  },
  emits:['addToothPosition','handleDelete', 'changValue', 'getLeftData','getRightData','getLeftBottomData','getRightBottomData'],
  setup(props, ctx) {
    let list = reactive(props.toothList as ToothList[])

    const changValue = (index: number) => {
      return function(val: string){
        // console.log(val, index)
        ctx.emit('changValue', val, index)
      }
    }

    const zinputdom = ref(null)
    
    const addToothPosition = () => {
      // console.log('点击了')
      ctx.emit('addToothPosition')
    }
    

    const handleDelete = (arr: ToothList[] ,index: number) => {
      ctx.emit('handleDelete', arr, index)
    }

    
    const getLeftData = (index: number) => {
      // console.log(index,'父元素')
      return (leftData: ToothData[]) => {
        // console.log('leftData', leftData)
        ctx.emit('getLeftData', leftData, index)
      }
      
    }
    const getRightData = (index: number) => {
      // console.log(index,'父元素')
      return (rightData: ToothData[]) => {
        // console.log('rightData', rightData)
        ctx.emit('getRightData', rightData, index)
      }
      
    }
    const getLeftBottomData = (index: number) => {
      // console.log(index,'父元素')
      return (leftBData: ToothData[]) => {
        // console.log('leftBData', leftBData)
        ctx.emit('getLeftBottomData', leftBData, index)
      }
      
    }
    const getRightBottomData = (index: number) => {
      // console.log(index,'父元素')
      return (rightBData: ToothData[]) => {
        // console.log('rightBData', rightBData)
        ctx.emit('getRightBottomData', rightBData, index)
      }
      
    }

    return {
      changValue,
      addToothPosition,
      handleDelete,
      // ToothList,
      list,
      focus,
      zinputdom,

      getLeftData,
      getRightData,
      getLeftBottomData,
      getRightBottomData,
      
    }
  }
})
</script>

<style lang="scss" scoped>
.combina {
  position: relative;
  margin-top: 10px;
.combination {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  position: relative;
  border: 1px solid #ccc;
  margin-top: 10px;
  .del-combin {
    padding-left: 10px;
    cursor: pointer;
  }
}
.combination-footer {
  position: relative;
  .btn {
    position: absolute;
    cursor: pointer;
    font-size: $fontSize;
    text-align: right;
    width: 80px;
    padding: 10px;
    right: 10px;
    z-index: 98;
    & > i {
      padding-right: 5px;
    }
  }
}
}
</style>